<template>
  <screenContainer>
    <div class="video-monitor ant-board">
        <div class="__left">
          <div class="__header">设备分组</div>
          <div class="__btns">
            <AppstoreAddOutlined title="添加分组" @click="addGroupHandler" />
          </div>
          <div class="__tree board-tree">
            <Tree @select="treeSelect" v-model:selectedKeys="selectedKeys" :tree-data="treeData">
              <template #title="{title,key,type}">
                <div v-if="type==='group'" :id="`t_${key}`">
                  <Dropdown :trigger="['contextmenu']" :getPopupContainer="getPopupContainer">
                    <span>{{ title }}</span>
                    <template #overlay>
                      <Menu @click="({ key: menuKey }) => onContextMenuClick({key, title}, menuKey)">
                        <menu-item key="1">设备管理</menu-item>
                        <menu-item key="2">编辑</menu-item>
                        <menu-item key="3">删除</menu-item>
                      </Menu>
                    </template>
                  </Dropdown>
                </div>
                <div v-else @contextMenu.prevent="() => {}">{{title}}</div>
              </template>
            </Tree>
          </div>
        </div>
        <div class="monitor-box">
          <div class="video-control">
            <a-dropdown trigger="click" :getPopupContainer="getPopupContainer">
              <a class="controlButton" @click.prevent>
                <Icon.AppstoreOutlined></Icon.AppstoreOutlined>
                画面设置
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <a @click="videoNumChange(1)">一屏</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="videoNumChange(4)">四屏</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a @click="videoNumChange(9)">九屏</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <div class="video-item" v-for="(item,index) in videoNum" :key="item" :style="videoStyle">
            <div class="video-inner">
              <template v-if="groupDevice[index]">
                <div class="video-name">{{groupDevice[index].deviceName}}</div>
                <Video :is-mobile="false" :autoplay="true" :key="groupDevice[index].id" :deviceId="groupDevice[index].id"></Video>
              </template>
            </div>


          </div>
        </div>
      </div>
    <a-modal :getContainer="getPopupContainer" v-model:open="addGroupModal" :title="addGroupModalTitle" @ok="addGroupConfirm">
      <div class="add-group-modal">
        <a-form :model="addForm" name="basic" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" autocomplete="off">
          <a-form-item label="分组名称" name="name" :rules="[{ required: true, message: '请输入分组名称' }]">
            <a-input v-model:value="addForm.monitorGroupName" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <deviceModal @update="updateHandler" v-model:show="deviceModalShow" :groupId="treeCurrent"></deviceModal>
  </screenContainer>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, watch, defineModel, computed } from 'vue';
import screenContainer from '../dataBoard/compNew/boadrContainer.vue';
import { Tree, Dropdown, Menu, MenuItem, message } from 'ant-design-vue';
import {
  AppstoreAddOutlined,
} from '@ant-design/icons-vue';
import * as Api from '@/api/videoMonitor';
import deviceModal from './deviceModal.vue';
import Video from './video.vue';
import 'xgplayer/dist/index.min.css';
import * as Icon from '@ant-design/icons-vue';

let fullDom = '.page-box';
const getRandomId =  (id) => {
  return `{Date.now()}_${Math.ceil(Math.random() * 10000)}_id_${id}`;
}
const getPopupContainer = () => {
  return document.querySelector('.ant-board');
}
const videoNum = ref(4);
const videoNumChange = (num) => {
  videoNum.value = num;
}
const videoStyle = computed(() => {
  if (videoNum.value == 1) {
    return {
      width: '100%',
      height: '100%'
    }
  }
  if (videoNum.value == 4) {
    return {
      width: '50%',
      height: '50%'
    }
  }
  if (videoNum.value == 9) {
    return {
      width: '33.33%',
      height: '33.33%'
    }
  }
  return {}
})
const treeData = ref([]);
const selectedKeys = ref([]);
const treeCurrent = ref(null);
const treeSelected = ref(null);
const groupDevice = ref([]);
const deviceModalShow = ref(false);
const addGroupModal = ref(false);
const addGroupModalTitle = ref('添加分组')
const addForm = reactive({
  id: '',
  monitorGroupName: ''
})
const addGroupHandler = () => {
  addGroupModal.value = true;
  addGroupModalTitle.value = '添加分组';
  addForm.monitorGroupName = '';
  addForm.id = '';
}
const treeSelect = (value, node, extra) => {
  const _node =node.selectedNodes[0];
  if (_node.type === 'group') {
    groupDevice.value = [];
    treeSelected.value = _node.key;
  }
  else {
    groupDevice.value = [];
    treeSelected.value = null;
    const _data: any = [{
      id: _node.deviceId,
      deviceName: _node.title
    }];
    groupDevice.value = _data;
  }
}
const getGroupTree = async () => {
  const res = await Api.getGroupTree();
  if (res) {
    // 设置第一个组为当前组
    treeSelected.value = res[0].id;
    selectedKeys.value = [res[0].id];
    treeData.value = res.map((item) => {
      return {
        key: item.id,
        title: item.name,
        type: 'group',
        children: item.children ? item.children.map((child) => {
          return {
            key: child.id,
            title: child.name,
            type: child.type,
            deviceId: child.deviceId
          }
        }) : []
      }
    })
  }
}
const addGroupConfirm = async () => {
  if (!addForm.monitorGroupName) {
    return message.error('请输入分组名称!')
  }
  const obj: any = {
    monitorGroupName: addForm.monitorGroupName
  }
  let _api = Api.addGroup;
  if (addForm.id) {
    obj.id = addForm.id;
    _api = Api.updateGroup
  }
  const res = await _api(obj);
  if (res) {
    getGroupTree();
    addGroupModal.value = false;
  }
}
const deleteGroup = async (id) => {
  const res = await Api.deleteGroup({
    id
  });
  if (res) {
    getGroupTree();
  }
}
const updateHandler = () => {
  getGroupTree();
  deviceModalShow.value = false;
}
const onContextMenuClick = (tree, menuKey) => {
  if (menuKey == '2') {
    // 编辑
    addForm.id = tree.key;
    addForm.monitorGroupName = tree.title;
    treeCurrent.value = tree.key;
    addGroupModal.value = true;
    addGroupModalTitle.value = '编辑分组'
  }
  if (menuKey == '3') {
    // 删除
    deleteGroup(tree.key);
  }
  if (menuKey == '1') {
    // 设备管理
    treeCurrent.value = tree.key;
    deviceModalShow.value = true;
  }
}
const getGroupDevice = async (group) => {
  const res = await Api.getGroupDevice({
    monitorGroupId: group
  });
  if (res) {
    groupDevice.value = res;
  }
}
watch(treeSelected, () => {
  if (treeSelected.value) {
    getGroupDevice(treeSelected.value);
  }
  
})
onMounted(() => {
  getGroupTree();
})

</script>
<style lang="less" scoped>
.video-monitor {
  display: flex;
  height: 100%;
  padding-top: 10px;

  .__left {
    flex-shrink: 0;
    width: 200px;
    height: 100%;
    padding: 20px;
    border: 1px solid rgb(0 255 255);
    background: linear-gradient(180deg, rgb(1 49 85 / 65%) 0%, rgb(1 49 85 / 35%) 100%);

    .__header {
      padding-bottom: 10px;
      border-bottom: 2px solid rgb(0 255 255);
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      line-height: 20px;
    }

    .__btns {
      display: flex;
      justify-content: flex-end;
      padding: 10px 0;
      color: #fff;
      font-size: 18px;

      span {
        cursor: pointer;
      }
    }

    .__tree {
      height: calc(100% - 100px);
      overflow-y: auto;

      * {
        background: transparent;
        color: #fff;
      }
    }
  }

  .monitor-box {
    position: relative;
    flex: 1;
    height: 100%;
    margin-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: hidden;
    border: 1px solid rgb(0 255 255);

    .video-control {
      position: absolute;
      top: 10px;
      right: 20px;

      .controlButton {
        color: rgb(0 255 255);
        font-size: 14px;
      }
    }

    .video-item {
      position: relative;
      padding: 20px 10px 0;
      float: left;

      .video-inner {
        width: 100%;
        height: 100%;
        background: rgba(#fff, .35);
      }

      .video-name {
        position: absolute;
        z-index: 99;
        top: 30px;
        left: 30px;
        color: #fff;
        font-size: 24px;
      }
    }
  }
}

.add-group-modal {
  padding: 20px;
}
</style>
